<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Fontra</title>
    <link href="/css/shared.css" rel="stylesheet" />
    <link href="/css/core.css" rel="stylesheet" />
    <link href="./assets/editor.css" rel="stylesheet" />
    <link href="/css/tooltip.css" rel="stylesheet" />
    <script type="importmap">
      {
        "imports": {
          "fontra/": "/"
        }
      }
    </script>
  </head>
  <body>
    <modal-dialog></modal-dialog>

    <div id="global-loader-spinner"></div>

    <div class="editor-container">
      <div class="top-bar-container cleanable-overlay"></div>
      <div class="sidebar-container cleanable-overlay left">
        <div class="sidebar-resize-gutter" data-grow-direction="right"></div>
      </div>
      <div class="main-container">
        <canvas id="edit-canvas" tabindex="1" lang="en"></canvas>

        <div id="metric-handle-container">
          <!-- content will be filled in dynamically -->
        </div>

        <div id="mini-console"></div>

        <div class="main-overlay-container cleanable-overlay">
          <div class="tab-overlay-container left">
            <div class="sidebar-shadow-box"></div>
          </div>
          <div class="tool-overlay-container">
            <div class="tools-overlay">
              <div id="edit-tools" class="tools-item">
                <!-- content will be filled in dynamically -->
              </div>
              <div id="zoom-tools" class="tools-item">
                <div
                  class="tool-button"
                  data-tool="zoom-out"
                  data-tooltip="Zoom out"
                  data-tooltipposition="bottom"
                >
                  <inline-svg class="tool-icon" src="/images/minus.svg"></inline-svg>
                </div>
                <div
                  class="tool-button"
                  data-tool="zoom-in"
                  data-tooltip="Zoom in"
                  data-tooltipposition="bottom"
                >
                  <inline-svg class="tool-icon" src="/images/plus.svg"></inline-svg>
                </div>
                <div
                  class="tool-button"
                  data-tool="zoom-fit-selection"
                  data-tooltip="Zoom to fit selection"
                  data-tooltipposition="bottom"
                >
                  <inline-svg class="tool-icon" src="/images/bullseye.svg"></inline-svg>
                </div>
                <div
                  class="tool-button"
                  data-tool="toggle-fullscreen"
                  data-tooltip="Toggle fullscreen"
                  data-tooltipposition="bottom"
                >
                  <inline-svg
                    class="tool-icon tool-icon--fullscreen-enter tool-icon--hidden"
                    src="/tabler-icons/maximize.svg"
                  ></inline-svg>
                  <inline-svg
                    class="tool-icon tool-icon--fullscreen-exit tool-icon--hidden"
                    src="/tabler-icons/minimize.svg"
                  ></inline-svg>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-overlay-container right">
            <div class="sidebar-shadow-box"></div>
          </div>
        </div>
      </div>
      <div class="sidebar-container cleanable-overlay right">
        <div class="sidebar-resize-gutter" data-grow-direction="left"></div>
      </div>
    </div>
  </body>

  <script type="module" src="@fontra/views-editor/start.js"></script>
</html>
